<template>
  <div>
    <a-form ref="formRef" :model="form" :rules="rules" :labelCol="labelCol">
      <a-row>
        <a-col :span="6">
          <a-form-item label="操作类型">
            <a-select
              ref="select"
              v-model:value="form.portValue"
              @focus="focus"
              @change="handleChange"
              placeholder="请选择端口"
            >
              <a-select-option
                v-for="item in types"
                :value="item.name"
                :key="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6" :offset="1">
          <a-form-item label="操作时间">
            <a-range-picker v-model:value="form.portValue" />
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-form-item>
            <a-input placeholder="请输入搜索内容"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-button type="primary" @click="search">搜索</a-button>
        </a-col>
      </a-row>
    </a-form>
    <a-divider></a-divider>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
    </a-table>
  </div>
</template>
<script>
import {
  reactive,
  ref,
  watch,
  computed,
  defineComponent,
  createVNode,
} from "vue";
import {
  CheckOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import {
  validatorPass,
  validtorConfirmPass,
  validatorPhone,
} from "@/assets/js/validate.js";
export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    const formRef = ref("");
    const form = reactive({
      inputValue: "",
      date: "",
    });
    const loading = ref(false);
    const visible = ref(false);
    const rules = {
      portValue: [
        { required: true, message: "请选择端口!", trigger: "change" },
      ],
    };
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 5,
    });
    const types = reactive([
      {
        name: "订单管理",
        id: 1,
      },
      {
        name: "测试",
        id: 1,
      },
    ]);

    const columns = [
      {
        title: "操作人",
        dataIndex: "id",
        className: "table",
        align: "center",
      },

      {
        title: "操作类型",
        dataIndex: "status",
        className: "table",
        align: "center",
      },
      {
        title: "IP地址",
        dataIndex: "operation",
        className: "table",
        align: "center",
      },
      {
        title: "操作时间",
        dataIndex: "operation",
        className: "table",
        align: "center",
      },
      {
        title: "操作记录",
        dataIndex: "operation",
        className: "table",
        align: "center",
      },
    ];
    const dataSource = [];

    for (let i = 0; i < 20; i++) {
      dataSource.push({
        key: i + 2,
        id: "John Brown",
        phone: "18888888888",
        content: "无法提现",
        date: "2021.12.21",
        img: "o",
        status: i,
      });
    }
    const state = reactive({
      indeterminate: true,
      checkAll: false,
      checkedList: ["Apple", "Orange"], //默认选中的列表是
    });

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: 0,
      showQuickJumper: true,
      showSizeChanger: true,
    }));

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      page.current = pagination.current;
      page.pageSize = pagination.pageSize;

      // 请求列表接口
    };
    // 查询
    const search = () => {
      console.log(form, "表单内容");
      formRef.value
        .validate()
        .then(() => {
          console.log("values", formState, toRaw(formState));
        })
        .catch((error) => {
          console.log("error", error);
        });
    };

    // 查看
    const look = (key) => {};

    return {
      formRef,
      form,
      rules,
      dataSource,
      columns,
      loading,
      pagination,
      handleTableChange,
      search,
      look,
      labelCol: { style: { fontWeight: "bold" } },
      wrapperCol: { offset: 1 },
      types,
    };
  },
};
</script>
